<template>
   <div class="foods-wrapper" ref="wrapper">
     <ul>
       <li class="food-list food-list-hook" v-for="(item,index) in goods" :key="index" :ref="index">
         <h1 class="title">{{item.name}}</h1>
         <ul >
           <li class="food-item border-bottom"
               v-for="(food,index) in item.foods"
               @click="showFoodDetail(food)"
               :key="index">
             <div class="icon">
               <img :src="food.icon" width="57px">
             </div>
             <div class="content">
               <h2 class="name">{{food.name}}</h2>
               <p class="desc">{{food.description}}</p>
               <div class="extra">
                 <span class="count">月售{{food.sellCount}}</span>
                 <span>好评率{{food.rating}}</span>
               </div>
               <div class="price">
                 <span class="now">￥{{food.price}}</span>
                 <span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
               </div>
               <div class="cartcontrol-wrapper">
                 <cart-control :food="food"></cart-control>
               </div>
             </div>
           </li>
         </ul>
       </li>
     </ul>
   </div>
</template>

<script>
import Bscroll from 'better-scroll'
import CartControl from '../../cartcontrol/CartControl'
export default {
  name: 'FoodsWrapper',
  props: {
    goods: Array,
    currMenuIndex: Number
  },
  components: {
    CartControl
  },
  data () {
    return {
      foodHeight: [],
      scrollY: 0
    }
  },
  mounted () {
    this.initScroll()
  },
  watch: {
    currMenuIndex () {
      const element = this.$refs[this.currMenuIndex][0]
      this.foodScroll.scrollToElement(element, 300)
    }
  },
  methods: {
    initScroll () {
      this.foodScroll = new Bscroll(this.$refs.wrapper, {
        probeType: 3,
        click: true
      })
      this.foodScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
        this.$emit('change', this.currentIndex)
      })
    },
    calculateHeight () {
      let foodList = this.$refs.wrapper.getElementsByClassName('food-list-hook')
      let height = 0
      this.foodHeight.push(height)
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]
        height += item.clientHeight
        this.foodHeight.push(height)
      }
    },
    showFoodDetail (food) {
      this.$emit('selected', food)
    }
  },
  computed: {
    currentIndex () {
      for (let i = 0; i < this.foodHeight.length; i++) {
        let height1 = this.foodHeight[i]
        let height2 = this.foodHeight[i + 1]
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i
        }
      }
      return 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  .foods-wrapper
    flex:1
    .title
      padding-left:14px
      height:26px
      line-height:26px
      border-left:2px solid #d9dde1
      font-size:12px
      color:rgb(147,153,159)
      background-color:#f3f5f7
    .food-item
      display:flex
      margin:18px
      padding-bottom:18px
      &:last-child
        &:after
          display:none
        margin-bottom:0
      .iocn
        flex:0 0 57px
        margin-right:10px
      .content
        flex:1
        margin-left:10px
        .name
          margin:2px 0 8px 0
          height:14px
          line-height:14px
          font-size:14px
          color:rgb(7,17,27)
        .desc,.extra
          line-height:10px
          font-size:10px
          color:rgb(147,153,159)
        .desc
          margin-bottom:8px
          line-height:12px
        .extra
          .count
            margin-right:12px
        .price
          line-height:24px
          font-weight:700
          .now
            margin-right:8px
            font-size:14px
            color:rgb(240,20,20)
          .old
            text-decoration:line-through
            font-size:10px
            color:rgb(147,153,159)
        .cartcontrol-wrapper
          position:absolute
          right:0
          bottom:12px
</style>
